<template>
	<a-modal :width='600'
    title='选择商品'
    :visible="visible"
    @ok="handleOk"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel" 
    >	
		<a-list :grid="{ gutter: 16, column: 4 }" :data-source="data">
		    <a-list-item slot="renderItem" slot-scope="item, index">
		    	<a-checkbox  :value="item.code" :checked='item.checked' @change='checkChange'>
			      <a-card :title="item.spuName"> 
			        Card content
			      </a-card>
			    </a-checkbox>
		    </a-list-item>
		</a-list>
		 <a-pagination  size="small"  style='text-align:right;'
		    v-model="current"
		    :page-size-options="pageSizeOptions"
		    :total="total"
		    show-size-changer

		    :page-size="pageSize"
		    :show-total="total => `共有 ${total} 件商品`"
		    @showSizeChange="onShowSizeChange"
		  >
		    <template slot="buildOptionText" slot-scope="props">
		       {{ props.value }}条/页 
		    </template>
		  </a-pagination>
	</a-modal>
</template>

<script type="text/javascript">
	import { commodityList,CategoryList,editCommodity_theme } from '@/api/minipro/commodity'
	export default{
		name:'selectCommodity',
		props:{
		  visible:{
		    type:Boolean,
		    default:false
		  } 
		},
		data(){
			return {
				data:[],//所有商品选项Array 
				keyword:'',//搜索内容 
				//商品列表页码配置
				pageSizeOptions: ['4','8'],
				current: 1,
				pageSize: 4,
				total: null,
				checkedItem:'',
			}
		},
		created(){ 
			this.CommodityList()
		},
		methods:{
			//请求所有商品列表
			CommodityList(){
				commodityList({pageNo:this.current,pageSize:this.pageSize,keyword:this.keyword}).then((res)=>{
					let data = res.data.dataList 
					data.forEach((item)=>{//将数据加上checked字段，以便后面控制单选
						item.checked = false
					})
					this.data = data
  
					this.total = res.data.totalRs 
				})
			},

			/*
				选择类别搜索：checkbox多选框，控制单选
			*/
			checkChange(e){
				console.log(e) 
				let { value } = e.target
				for(let i=0; i<this.data.length; i++){ 
					console.log(this.data[i].code == value)
					if(this.data[i].code == value){
						this.data[i].checked = !this.data[i].checked 
						if(this.data[i].checked == true){
							this.checkedItem = this.data[i].code
						}
						continue
					}
					//其余checkbox的checked值 设置为false
					this.data[i].checked = false
				}   
			},
			handleCancel(){
				this.$emit('cancel')
			},
			handleOk(){
				console.log(this.checkedItem) 
			}
		}
	}
</script>